<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
	<div class="row">
		<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
			<div class="panel panel-info">
				  <div class="panel-heading">
						<h3 class="panel-title">Gọi món</h3>
				  </div>
				  <div class="panel-body form">
						<form action="" method="POST" class="form-horizontal" role="form">
								<div class="form-group">
									<label for="inputEmail3" class="col-sm-3 control-label">Khu vực</label>
									<div class="col-sm-9" "with: vendors" >
									  <select name="" id="" class= "form-control" data-bind='options: sampleKV, optionsText: "tenkv",  value: category_khuvuc'> </select>
									</div>
								</div>
								<div class="form-group">
									<label for="inputEmail3" class="col-sm-3 control-label">Bàn</label>
									<div class="col-sm-9"  data-bind="with: category_khuvuc">
									   <select class="form-control" data-bind='options: ban, optionsText: "soban"'> </select>
									</div>
								</div>
								<div class="form-group">
									<label for="inputEmail3" class="col-sm-3 control-label">Loại</label>
									<div class="col-sm-9">
									  <select name="" id="" class="form-control"  data-bind='options: sampleProductCategories2, optionsText: "loai",  value: category_nhom'> </select>
									</div>
								</div>
								<div class="form-group">
									<label for="inputEmail3" class="col-sm-3 control-label">Nhóm</label>
									<div class="col-sm-9" data-bind="with: category_nhom">
									   <select class="form-control" data-bind='options: nhom, optionsText: "tennhom", value: $parent.nhom'> </select>
									</div>
								</div>
								<div class="form-group">
									<label for="inputEmail3" class="col-sm-3 control-label">Món</label>
									<div class="col-sm-9" data-bind="with: nhom">
									   <select class="form-control" data-bind='options: mon, optionsText: "tenmon"'> </select>
									</div>
								</div>
								<div class="form-group">
									<label for="inputEmail3" class="col-sm-3 control-label">Số lượng</label>
									<div class="col-sm-9" >
									  <input type="number" name="" id="" class="form-control" value="1" min="1" max="100" data-bind='value: sl'></input>
									</div>
								</div>
								<div class="form-group">
									<label for="inputEmail3" class="col-sm-3 control-label">Ghi chú</label>
									<div class="col-sm-9">
									  <input name="Chọn " id="" class="form-control"></input>
									</div>
								</div>
								<div class="form-group">
							  	<label for="inputPassword3" class="col-xs-3 col-sm-3 col-md-3 col-lg-3"></label>
							    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
							       <button  class="btn btn-primary"><span class="glyphicon glyphicon-plus-sign"></span> Thêm</button>
							    </div>
							       
							  </div>	
							</form>	
				  </div>
			</div>
				
		</div>
		<div class="col-xs-12 col-sm-6 col-md-7 col-lg-8">
			<div class="panel panel-info ">
				  <div class="panel-heading">
						<h3 class="panel-title">Danh sách gọi món</h3>								
				  </div>
				  <div class="panel-body form">
						<div class="table-responsive">

							<table class="table table-striped table-bordered">
								<thead>
									<tr class="btn-primary btn-md">
										<th>STT</th>
										<th>Số bàn</th>
										<th>Mã khu vực</th>
										<th>Tên khu vực</th>
										
										
									</tr>
								</thead>

								<tbody data-bind="template: { foreach: vendors, as :'vendors' }">					  
									<tr> 
										<td data-bind="text: $index"></td>
										<td data-bind="text: vendors.ban.soban"></td>
										<td data-bind="text: vendors.makv"></td>
										<td data-bind="text: vendors.tenkv"></td>
										
									</tr>													
								</tbody>
							</table>
						</div>
						<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
							<div class="text-center">
								<ul class="pagination">
								  <li><a href="#">&laquo;</a></li>
								  <li><a href="#">1</a></li>
								  <li><a href="#">2</a></li>
								  <li><a href="#">3</a></li>
								  <li><a href="#">4</a></li>
								  <li><a href="#">5</a></li>
								  <li><a href="#">&raquo;</a></li>
								</ul>
							</div>
						</div>
				  </div>
			</div>
			
		</div>	
	</div>	
								   
</div>

<script type="text/javascript">
	// Some of the Knockout examples use this data
var sampleProductCategories2 = [
  {
  	"loai": "Thức uống",
    "nhom": [
      {
        "tennhom": "Sinh tố",
        "DVT": "ly",
        "mon": [
	      {
	      	"mamon":" sp001",
	        "tenmon": "Sinh tố bơ",
	        "gia": "20000"
	      },
	      {
	      	"mamon":" sp002",
	        "tenmon": "Sinh tố xoài",
	        "gia": "25000"
	      }, 
	    ]
      },
      {
        "tennhom": "Kem",
        "DVT": "ly",
        "mon": [
	      {
	      	"mamon":" sp003",
	        "tenmon": "Kem xôi",
	        "gia": "20000",
	      },
	      {
	      	"mamon":" sp004",
	        "tenmon": "Kem đu đủ",
	        "gia": "25000",
	      }
	    ]
      }
   
    ]
  },
  {
  	"loai": "Thức ăn",
    "nhom": [
      {
        "tennhom": "Cơm",
        "DVT": "dĩa",
        "mon": [
	      {
	      	"mamon":" sp005",
	        "tenmon": "Cơm sườn",
	        "gia": "20000",
	      },
	      {
	      	"mamon":" sp006",
	        "tenmon": "Cơm chiên",
	        "gia": "25000",
	      }, 
	    ]
      },
      {
        "tennhom": "Phở",
        "DVT": "tô",
        "mon": [
	      {
	      	"mamon":" sp007",
	        "tenmon": "Phở bò",
	        "gia": "20000",
	      },
	      {
	      	"mamon":" sp008",
	        "tenmon": "Phở thịt theo",
	        "gia": "25000",
	      }
	    ]
      }
   
    ]  
  }
];
var sampleKV= [
  {
  	"makv": "kv1",
  	"tenkv": "Khu vực 1",
    "ban": [
      {
        "soban": "1",
        "soghe": "2"
      },
      {
       "soban": "2",
        "soghe": "2"
      }
    ]  
  },
  {
  	"makv": "kv2",
  	"tenkv": "Khu vực 2",
    "ban": [
      {
        "soban": "3",
        "soghe": "2"
      },
      {
       "soban": "4",
        "soghe": "2"
      },
      {
        "soban": "5",
        "soghe": "2"
      }
    ],
  }
];
</script>